<template>
  <div id="register">
    <nut-row class="padding-top">
      <nut-col :span="24"  >
        <h2>注册</h2>
      </nut-col>
    </nut-row>
    <nut-row class="padding-top">
      <nut-col :span="6">
        <div class="text-st">账号:</div>
      </nut-col>
      <nut-col :span="16">
        <div>
          <nut-textinput
              maxlength="30"
              v-model="form.name"
          />
        </div>
      </nut-col>
    </nut-row>
    <nut-row class="padding-top">
      <nut-col :span="6">
        <div class="text-st">密码:</div>
      </nut-col>
      <nut-col :span="16">
        <div>
          <nut-textinput
              type="password"
              maxlength="30"
              v-model="form.password"
          />
        </div>
      </nut-col>
    </nut-row>
    <nut-row class="padding-top">
      <nut-col :span="6">
        <div class="text-st">重复密码:</div>
      </nut-col>
      <nut-col :span="16">
        <div>
          <nut-textinput
              type="password"
              maxlength="30"
              v-model="form.password1"
          />
        </div>
      </nut-col>
    </nut-row>
    <nut-row  class="padding-top">
      <nut-col :span="24">
        <nut-button
            class="bt-color"
            shape="circle"
            block
            @click="register"
        >
          注册
        </nut-button>
      </nut-col>
    </nut-row>
  </div>
</template>

<script>
import { Register } from '@/api/auth'
export default {
  name: "register",
  data() {
    return {
      form: {
        name: "",
        password: "",
        password1: ""
      }
    }
  },
  methods: {
    register() {
      Register(this.form).then(res => {
        if (res.code === 1) {
          this.$toast.success(res.message, {
            duration: 1500,
            onClose: () => {
              this.$router.push("/auth/login")
            }
          })
        }else {
          this.$toast.fail(res.message)
        }
      }).catch(err => {
          console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="css">
.padding-top {
  margin-top: 15px;
}
.bt-color {
  background: rgb(65,184,131);
  color:#FFFFFF;
}
.text-st {
  text-align: center;
  line-height: 15px;
  vertical-align:middle;
  padding-top: 10px;
}
</style>